<template>
	<view>
		<view class="box">
			<view class="menu_content_box_page">
				<view class="pa15">

					<view class="mt15 area_block_1" v-for="item, index in list" :key="index" v-if="list.length > 0">
						<view class="flex_box">
							<view class="re mr25" @tap="toDetail(item.id)">
								<image :lazy-load="true" :src="item.imgUrl" class="img17 vt"></image>
							</view>
							<view class="item ov" @tap="toDetail(item.id)">
								<view class="df fldc jcsb hp100">
									<view class="fs28 lh34 cor_333 ell">{{item.title}} - {{item.weight}}</view>
									<view class="df aic">
										<image :lazy-load="true" src="/static/icon_location.png" class="img3"></image>
										<view class="ml5 fs22 cor_808">{{item.place}}</view>
									</view>
									<view class="ml5 fs22 cor_808">{{item.place}}</view>
								</view>
							</view>
							<!-- 删除-按钮 -->
							<view class="box_pack">
								<view class="delete_btn" @tap="del(item.id)">删除</view>
							</view>
						</view>
					</view>

					<view v-if="list.length == 0" style="width: 100%;height: 100vh">
						<view style="height: 200rpx;"></view>
						<image :lazy-load="true" src="../../static/excavator.png" style="width: 100%; padding: 100rpx 200rpx;">
						</image>
						<view style="width: 100%;text-align: center;color: #808080;">暂无数据</view>
					</view>


				</view>
			</view>
			<!-- 添加拖车-按钮 -->
			<view class="consult_immediately_btn" @tap="toAdd">添加拖车</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getMyTrailersApi, deleteTrailereApi
	} from '@/http/api.js';

	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 10,
				totalPage: 1,
				userId: uni.getStorageSync('userId'),
				list: []
			}
		},
		onLoad() {
			this.getMyTrailers();
		},
		onReachBottom() {
			this.getMyTrailers();
		},
		onBackPress(options) {
		    uni.redirectTo({
		    	url: '/pages/personal_center/personal_center'
		    })
			return true;
		},
		
		methods: {
			getMyTrailers() {
				let that = this;
				
				showLoading('加载中');
				getMyTrailersApi({
					userId: that.userId,
					pageIndex: that.pageIndex,
					pageSize: that.pageSize
				}).then(res=>{
					if (res.data.currentPage == 1) {
						that.list = res.data.data;
					} else {
						for(let i in res.data.data) {
							that.list.push(res.data.data[i]);
						}
					}
					if (res.data.data.length > 0) {
						that.pageIndex = res.data.currentPage + 1;
					}
					that.totalPage = res.data.totalPage
					hideLoading();
				}).catch(err=>{
					hideLoading();
				})
			},
			
			del(id) {
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除吗？',
				    success: function (res) {
				        if (res.confirm) {
							deleteTrailereApi({
								id: id
							}).then(result=>{
								that.list = [];
								that.pageIndex = 1;
								that.getMyTrailers();
							}).catch(error=>{
								toast(error.msg);
			
							})
				        } else if (res.cancel) {
				            console.log('用户取消删除')
				        }
				    }
				});
			},
			
			
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/trailer_information_editing/trailer_information_editing?id=' + id 
				})
			},
			
			
			toAdd() {
				uni.navigateTo({
					url: '/pages/trailer_information_create/trailer_information_create'
				})
			}
		}
	}
</script>

<style>
  
  page { background-color: #f7f6f6; }
  
	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 98rpx); */
		background-color: #f7f6f6;
    padding-bottom: 98rpx;
	}

	.area_block_1 {
		position: relative;
		padding: 32rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.watermark_img_pos {
		position: absolute;
		top: 86rpx;
		right: 20rpx;
		width: 92rpx;
		height: 92rpx;
		z-index: 2;
	}

	.delete_btn {
		display: inline-block;
		width: 125rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(90deg, #f46933, #e3140b);
		border-radius: 40rpx;
	}

	.consult_immediately_btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
    z-index: 3;
	}
</style>
